<template>
<div class="layout">

    <Menu mode="horizontal" :theme="theme1" :active-name="mid"  >
      <a class="layout-logo"><img class="logo1" src="https://icarusion.gitee.io/iview/e1cf12c07bf6458992569e67927d767e.png"/>
     </a>
    <div class="layout-nav">
      <router-link to="/">
        <MenuItem name="1" >
            <Icon type="ios-paper" />
            热门
        </MenuItem>
        </router-link>
        <router-link to="/movie/2">
        <MenuItem name="2">
            <Icon type="ios-people" />
            电影
        </MenuItem>
        </router-link>
           <router-link to="/tvplay/3">
        <MenuItem name="3">
            <Icon type="ios-stats" />
           电视剧
        </MenuItem>
        </router-link>
             <router-link to="/variety/4">
        <MenuItem name="4">
            <Icon type="ios-construct" />
            综艺
        </MenuItem>
        </router-link>
    
     </div>
        
          <div style="height:auto">
                 
          </div>

    <div class="layout-logo2">
             <Input search enter-button placeholder="Enter something..." />
         </div>
    </Menu>
 
    </div>
</template>
<script>
    export default {
        data () {
            return {
                theme1: 'light',
                mid:'1'
        }
        },
        
        mounted(){
            if(this.$route.params.mid){
       this.mid=this.$route.params.mid;
            }
        }
    }
</script>
<style scoped>
.logo1{
 
        height: 50px;
    margin-top: 8px;
    float: left;
}
.layout{
  

}
 .layout-logo{
  
   
  width: 10%;
  
    float: left;
    position: relative;
  
    left: 3%;
}

.layout-logo2{
  
   
   width: 20%;
    float: right;
    position: relative;
    top: 15px;
    right: 15%
}
.layout-nav{
    width: 60%;
    margin: 0 auto;
   
}
.layout-footer-center{
    text-align: center;
}

</style>